<template>
  <div class="full-screen-div">
    <el-card style="z-index: -1; width: 90%; margin-left: 5%; margin-top: 5%">
      <el-row type="flex" class="header-actions">
        <div class="button-group">
          <el-button @click="drawer = true">新增</el-button>
          <el-button @click="update">编辑</el-button>
          <el-button @click="handleDelete(1)">删除</el-button>
          <el-button @click="handleEnable(0)">启用</el-button>
          <el-button @click="handleDisable(1)">停用</el-button>
        </div>
        <el-input style="width: 280px" placeholder="请输入巡检项目编码或名称" v-model="condition">
          <el-button slot="append" class="el-icon-search" @click="selectPro"></el-button></el-input>
      </el-row>
      <el-table :data="inspectionProject.records" @selection-change="handleSelectionChange" border="0"
        style="width: 100%" align="center" sortable>
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="180" align="center" fixed>
          <template slot-scope="scope">
            {{ (currentPage - 1) * size + scope.$index + 1 }}
          </template></el-table-column>
        <el-table-column prop="inspectionprojectName" label="巡检项目名称" width="180" align="center"></el-table-column>
        <el-table-column prop="code" label="巡检项目编号" width="180" align="center"></el-table-column>
        <el-table-column prop="inspectionprojectTypeId" label="巡检分类" width="180" align="center">
        </el-table-column>
        <el-table-column prop="inspectionprojectState" label="状态" width="180" align="center">
          <template slot-scope="scope"><el-span v-if="scope.row.inspectionprojectState == 0">启用</el-span>
            <el-span v-if="scope.row.inspectionprojectState == 1">停用</el-span></template>
        </el-table-column>
        <el-table-column prop="inspectionprojectContent" label="巡检内容" width="180" align="center"></el-table-column>
        <el-table-column prop="deviceInspectiontaskResult.resultName" label="判定结果类型" width="180"
          align="center"></el-table-column>
        <el-table-column prop="inspectionprojectIsresult" label="判定结果选项" width="180" align="center"></el-table-column>
        <el-table-column prop="notse" label="备注" width="180" align="center"></el-table-column>
      </el-table>
      <el-row style="text-align: right;margin-top: 20px">
        <el-pagination background layout="prev, pager, next, sizes, total" :total="this.inspectionProject.total"
          :page-size="this.inspectionProject.size" :sizes="this.inspectionProject.size" :page-sizes="pageselect"
          @size-change="handleSizeChange" :current-page="this.inspectionProject.current"
          @current-change="handleCurrentChange">
        </el-pagination>
      </el-row>
    </el-card>



    <el-drawer :visible.sync="drawer" :direction="direction" title="新增"
      style="margin-right: 1%; letter-spacing: 2px; font-weight: bold" size="40%" :close-on-click-overlay="false">
      <el-divider></el-divider>
      <el-form label-width="140px">
        <el-form-item label="*巡检项目编号"><el-input placeholder="系统自动生成" style="width: 450px; float: left"
            disabled></el-input></el-form-item>
        <el-form-item label="*巡检项目名称"><el-input placeholder="请输入" style="width: 450px; float: left"
            v-model="inspectionPro.inspectionprojectName"></el-input></el-form-item>
        <el-form-item label="巡检分类"><el-select placeholder="请选择" style="width: 450px; float: left"
            v-model="inspectionPro.inspectionprojectTypeId">
            <el-option v-for="item in ProjectType.data" :key="item" :label="item.dictLabel"
              :value="item.dictLabel"></el-option> </el-select></el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="inspectionPro.inspectionprojectState">
            <el-radio label="0">启用</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="巡检内容"><el-input type="textarea" :rows="4" style="width: 450px"
            v-model="inspectionPro.inspectionprojectContent"></el-input></el-form-item>
        <el-form-item label="判定结果类型">
          <el-radio-group v-model="inspectionPro.inspectionprojectResult" size="large"  @change="changeResult">
            <el-radio-button label="1">数值</el-radio-button>
            <el-radio-button label="2">长文本格式</el-radio-button>
            <el-radio-button label="3">单选</el-radio-button>
            <el-radio-button label="4">多选</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <span v-if="inspectionPro.inspectionprojectResult == '1'">
          <el-form-item label="字段名称"><el-input style="width: 450px"
              v-model="inspectionRes.resultName1"></el-input></el-form-item>
          <el-form-item label="上限"><el-input style="width: 450px"
              v-model="inspectionRes.resultUpper"></el-input></el-form-item>
          <el-form-item label="下限"><el-input style="width: 450px"
              v-model="inspectionRes.resultLower"></el-input></el-form-item>
        </span>
        <span v-if="inspectionPro.inspectionprojectResult == '2'">
          <el-form-item label="字段名称"><el-input style="width: 450px"
              v-model="inspectionRes.resultName2"></el-input></el-form-item>
          <el-form-item label="备注"><el-input style="width: 450px"
              v-model="inspectionRes.notse"></el-input></el-form-item>
        </span>
        <span v-if="inspectionPro.inspectionprojectResult == '3'">
          <el-form-item label="字段名称"><el-input style="width: 450px"
              v-model="inspectionRes.resultName3"></el-input></el-form-item>
          <div v-for="(item, index) in change" :key="item" :value="index">
            <el-form-item :label="item.name"><el-input style="width: 400px" v-model="item.value"
                @blur="save(item.value)"></el-input>
              <el-button @click="remove(index)">-</el-button></el-form-item>
          </div>
          <el-form-item><el-button style="width: 450px" @click="add">+添加更多选项</el-button></el-form-item>
        </span>
        <span v-if="inspectionPro.inspectionprojectResult == '4'">
          <el-form-item label="字段名称"><el-input style="width: 450px"
              v-model="inspectionRes.resultName4"></el-input></el-form-item>
          <div v-for="(item, index) in check" :key="item" :value="index">
            <el-form-item :label="item.name"><el-input style="width: 400px" v-model="item.value"></el-input>
              <el-button @click="removeCheck(index)">-</el-button></el-form-item>
          </div>
          <el-form-item><el-button style="width: 450px" @click="addCheck">+添加更多选项</el-button></el-form-item>
        </span>
      </el-form>
      <el-divider></el-divider>
      <div style="text-align: right; margin-right: 1%">
        <el-button>取消</el-button>
        <el-button @click="insert">确定</el-button>
      </div>
    </el-drawer>




    <el-drawer :visible.sync="drawers" :direction="direction" title="编辑"
      style="margin-right: 1%; letter-spacing: 2px; font-weight: bold" size="40%" :close-on-click-overlay="false">
      <el-divider></el-divider>
      <el-form label-width="140px">
        <el-form-item label="*巡检项目编号"><el-input placeholder="系统自动生成" style="width: 450px; float: left"
            disabled></el-input></el-form-item>
        <el-form-item label="*巡检项目名称"><el-input placeholder="请输入" style="width: 450px; float: left"
            v-model="select.inspectionprojectName"></el-input></el-form-item>
        <el-form-item label="巡检分类"><el-select placeholder="请选择" style="width: 450px; float: left"
            v-model="select.inspectionprojectTypeId">
            <el-option v-for="item in ProjectType.data" :key="item" :label="item.dictLabel"
              :value="item.dictLabel"></el-option> </el-select></el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="select.inspectionprojectState">
            <el-radio :label="0">启用</el-radio>
            <el-radio :label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="巡检内容"><el-input type="textarea" :rows="4" style="width: 450px"
            v-model="select.inspectionprojectContent"></el-input></el-form-item>
        <el-form-item label="备注"><el-input type="textarea" :rows="4" style="width: 450px"
            v-model="select.notse"></el-input></el-form-item>

      </el-form>
      <el-divider></el-divider>
      <div style="text-align: right; margin-right: 1%">
        <el-button @click="cancel">取消</el-button>
        <el-button @click="confirm">确定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import axios from "axios";
import { selectZi } from "@/api/eastjet-maintenance/type/type";
import { Table } from "element-ui";
export default {
  data() {
    return {
      id: 0,
      change: [],
      newChange: [],
      check: [],
      changevalue: [],
      newCheck: [],
      mulitiSelect: [],
      ProjectType: [],
      pageselect: [10, 20, 30, 40, 50],
      drawer: false,
      drawers: false,
      direction: "rtl",
      status: "",
      radio2: "1",
      radio3: "",
      currentPage: 1,
      size: 2,
      condition: "",
      // state:0,
      inspectionPro: {
        inspectionprojectName: "",
        code: "",
        inspectionprojectTypeId: "",
        inspectionprojectState: "1",
        inspectionprojectContent: "",
        inspectionprojectResult: "1",
        inspectionprojectIsresult: "",
        notse: "",
        tableName: "device_inspectionproject"
      },
      inspectionRes: {
        resultName1: "",
        resultName2: "",
        resultName3: "",
        resultName4: "",
        resultUpper: "",
        resultLower: "",
        notse: "",
        choose: "",
        tableName: "device_inspectionproject"
      },
      selectType: {},
      select: [],
      inspectionProject: [],
      zhi: "sys_inpectionpro_type",
    };
  },
  mounted() {
    this.init();

    selectZi(this.zhi).then((res) => {
      this.ProjectType = res.data;
      console.log("字典", this.ProjectType);
    });
  },
  methods: {
    update() {
      this.drawers = true;
      console.log(this.select);
    },
    cancel() {
      this.drawers = false;
      this.select = [];
      this.init();
    },
    validateForm() {
      const fields = [
        'inspectionprojectName',
        'inspectionprojectTypeId',
        'inspectionprojectState',
        'inspectionprojectContent',
        'inspectionprojectResult',
      ];
      console.log(this.change.length)

      if (this.inspectionRes.resultName1 == "" && this.inspectionPro.inspectionprojectResult == "1"&&this.inspectionRes.resultUpper == "" && this.inspectionRes.resultLower == "") {
        return false;
      } else if (this.inspectionRes.resultName2 == "" && this.inspectionPro.inspectionprojectResult == "2"&&this.inspectionRes.notse == "") {
        return false;
      } else if((this.inspectionRes.resultName3 == ""||this.inspectionRes.resultName3 == null) && this.inspectionPro.inspectionprojectResult == "3"&&this.change.length == 0){
        return false;
      }else if((this.inspectionRes.resultName4 == ""||this.inspectionRes.resultName4 == null) && this.inspectionPro.inspectionprojectResult == "4"&&this.check.length == 0){
        return false;
      }

      for (const field of fields) {
        if (!this.inspectionPro[field]) {
          return false;
        }
      }

      return true;
    },
    confirm() {
      console.log(this.select);
      axios.post("http://localhost:9286/inspectionpro/update", this.select).then((res) => {
        this.drawers = false;
        this.init();
        this.$message.success("编辑成功")
      })
    },
    insert() {
      if(this.validateForm()){
      axios
        .get("http://localhost:9286/inspectionpro/addInspectionPro", {
          params: this.inspectionPro
        })
        .then((res) => {
          console.log(res.data);
          console.log(this.inspectionPro);
        })
        .catch((err) => { });
      // this.insertRes();

      this.insertSe();
      this.insertRes();
      this.init();
    }else{
      this.$message({
          type: 'error',
          message: '请确保所有字段都已填写！!'
        });
    }
    },

    insertRes() {
      this.inspectionRes.choose = this.inspectionPro.inspectionprojectResult;
      console.log("res", this.inspectionRes.choose);
      axios
        .get("http://localhost:9286/inspectionpro/addRes", {
          params: this.inspectionRes,
        })
        .then((res) => {
          console.log(res.data);
          if(res.data=="添加成功"){
            this.$message.success("添加成功")
            this.drawer = false;

          }else{
            this.$message.error("添加失败")
          }
        })
        .catch((err) => { });
    },
    insertSe() {
      for (var i = 0; i < this.change.length; i++) {
        console.log("type:", this.change[i].value);
        if (i == 0) {
          this.change[i].jugement = "1";
        } else {
          this.change[i].jugement = "2";
        }

        axios
          .get("http://localhost:9286/inspectionpro/addSe", {
            params: this.change[i],
          })
          .then((res) => {
            console.log(res.data);
          })
          .catch((err) => { });

      }

      for (var i = 0; i < this.check.length; i++) {
        console.log("type:", this.check[i].value);
        axios
          .get("http://localhost:9286/inspectionpro/addSe", {
            params: this.check[i],
          })
          .then((res) => {
            console.log(res.data);
            this.check = [];
          })
          .catch((err) => { });
      }

    },
    handleEnable(state) {
      for (var i = 0; i < this.mulitiSelect.length; i++) {
        this.id = this.mulitiSelect[i].inspectionprojectId;
        console.log(this.mulitiSelect[i].inspectionprojectId);
        axios
          .get("http://localhost:9286/inspectionpro/updateState", {
            params: { id: this.id, status: state },
          })
          .then((res) => {
            console.log(res.data);
            this.init();
          })
          .catch((err) => { });
      }
    },
    handleDisable(state) {
      this.handleEnable(state);
    },
    handleDelete(val) {
      for (var i = 0; i < this.mulitiSelect.length; i++) {
        this.id = this.mulitiSelect[i].inspectionprojectId;
        console.log(this.mulitiSelect[i].inspectionprojectId);
        axios
          .get("http://localhost:9286/inspectionpro/delPro", {
            params: { id: this.id, isDelete: val },
          })
          .then((res) => {
            console.log(res.data);
            this.init();
          })
          .catch((err) => { });
      }
    },
    handleSelectionChange(val) {
      this.mulitiSelect = val;
      this.select = this.mulitiSelect[0];
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.init();
    },

    handleSizeChange(size) {
      this.size = size;
      console.log(size);
      this.init();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    add() {
      this.newChange = {
        id: this.change.length + 1,
        name: "选项" + (this.change.length + 1),
        options: this.changevalue,
        choose: this.inspectionPro.inspectionprojectResult,
        jugement: "1",
      };
      this.change.push(this.newChange);
      console.log(this.change);
    },
    changeResult(){
      this.inspectionRes={};
      this.change=[];
      this.check=[];
    },
    save(value) {
      this.changevalue = { options: value, choose: this.inspectionPro.inspectionprojectResult };
      this.chekcValue = { choose: this.inspectionPro.inspectionprojectResult, tableName: "device_inspectionproject" };
    },
    addCheck() {
      this.newCheck = {
        id: this.check.length + 1,
        name: "选项" + (this.check.length + 1),
        value: "",
        choose: this.inspectionPro.inspectionprojectResult
      };
      this.check.push(this.newCheck);
      console.log(this.check);
    },
    remove(index) {
      console.log(index);
      this.change.splice(index, 1);
    },
    removeCheck(index) {
      console.log(index);
      this.check.splice(index, 1);
    },
    init(val) {
      axios
        .get("http://localhost:9286/inspectionpro/query", {
          params: { page: this.currentPage, size: this.size, condition: val },
        })
        .then((res) => {
          this.inspectionProject = res.data;
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    selectPro() {
      this.init(this.condition);
    },
  },
};
</script>


<style scoped>
.clearfix:after {
  font-weight: bold;
}

.button-group {
  display: flex;
  gap: 10px;
}

.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 20px;
}

.sidebar-card {
  width: 200px;
  height: 100%;
  margin-top: 100px;
  position: fixed;
  left: 0px;
  text-align: left;
}

.sidebar-menu {
  position: fixed;
  top: 30px;
  background: white;
  padding: 1rem;
}

.menu-item {
  border-bottom: 1px solid #ddd;
  padding: 0.5rem 0;
}

.menu-header {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.arrow {
  transition: transform 0.3s ease-in-out;
}

.expanded .arrow {
  transform: rotate(90deg);
}

.sub-menu {
  list-style: none;
  padding-left: 1rem;
  margin-top: 0.5rem;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.navbar {
  position: fixed;
  /* 固定在顶部 */
  top: 0;
  /* 距离顶部0像素 */
  left: 0;
  /* 距离左边0像素 */
  right: 0;
  /* 距离右边0像素 */
  background-color: #006633;
  color: white;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  /* 确保导航栏在其他内容之上 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 添加阴影效果 */
}

.logo {
  font-size: 18px;
  font-weight: bold;
}

.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu li {
  margin-right: 40px;
}

.menu li a {
  text-decoration: none;
  color: white;
}

.menu li a:hover {
  border-bottom: 2px solid white;
}

.user-profile img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.tree {
  margin-left: -165px;
  width: 15%;
  height: 100%;
  border: 1px solid black;
}
</style>